<template>
  <onez-view class="onez-cards" v-if="ready" :style="{ transform: (small ? 'scale(0.90) ' : '') + transform }">
    <onez-view
      v-for="(card,idx) in myCards"
	  :key="idx"
      :class="card.selected ? 'selected' : ''"
      @click="sel(card, idx)"
      :style="{
        width: cardWidth + 'px',
        height: cardHeight + 'px',
        transform: 'translate(' + card.x + 'px,' + (card.y + offsetY) + 'px) ' + card.transform,
        backgroundImage: 'url(' + card.pic + ')',
        zIndex: card.z || 0
      }"
      class="onez-card"
    ></onez-view>
  </onez-view>
</template>
<script>
/**
 */
	import onezView from '../../components/onez-view/onez-view.vue'
export default {
  name: 'ddz-cards',
  components: {
  	onezView
  },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    ani: {
      type: Boolean,
      default: false
    },
    small: {
      type: Boolean,
      default: false
    },
    select: {
      type: Boolean,
      default: false
    },
    showCard: {
      type: Boolean,
      default: true
    },
    cards: {
      type: Array,
      default() {
        return [];
      }
    },
    col: {
      type: Number,
      default: 10
    },
    cardWidth: {
      type: Number,
      default: 71
    },
    cardHeight: {
      type: Number,
      default: 96
    }
  },
  data() {
    return {
      myCards: [],
      ready: true,
      first: true,
      transition: 'none',
      transform: '',
      offset: 25,
      offsetY: 0
    };
  },
  watch: {
    cards(nVal, oVal) {
      this.update();
    },
    value(nVal, oVal) {
      for (var i = 0; i < this.myCards.length; i++) {
        var card = this.myCards[i];
        card.selected = this.value.indexOf(card.name) != -1;
      }
    }
  },
  mounted() {
    this.init();
  },
  destroyed() {},
  methods: {
    cardOffsetX(num) {
      var offset = (num - 1) * this.offset + this.cardWidth;
      return -offset / 2;
    },
    async moveCard(card, i) {
      var offsetLeft = 0,
        index = 0;
      var col = this.col;
      if (i >= col) {
        offsetLeft = this.cardOffsetX(this.cards.length - col);
        index = i % col;
        card.y = this.cardHeight / 2;
      } else {
        if (this.cards.length >= col) {
          offsetLeft = this.cardOffsetX(col);
        } else {
          offsetLeft = this.cardOffsetX(this.cards.length);
        }
        index = i;
        card.y = 0;
      }
      card.x = index * this.offset + offsetLeft;
    },
    getValue(name) {
      if (name) {
        let number = ['3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A', '2', 'X', 'D'];
        if (name.length >= 2) {
          return number.indexOf(name.substr(1)) + 1;
        } else {
          return number.indexOf(name) + 1;
        }
      }
      return 0;
    },
    async update(sort) {
      let cardBack = await this.$game.hook(this, 'static', { file: '/images/cards/card_00.png' });
      let myCards = await this.$game.hook(this, 'card2object', { cards: this.cards });
      var that = this;
      var cards = [];
      myCards.sort(function(a, b) {
        return that.getValue(a.name) - that.getValue(b.name);
      });
      for (var i = 0; i < myCards.length; i++) {
        var card = myCards[i];
        if (this.showCard) {
          card.pic = card.image;
        } else {
          card.pic = cardBack;
        }
        card.transform = '';
        this.moveCard(card, i);
        cards.push(card);
      }
      this.myCards = cards;
      this.$forceUpdate();
    },
    async init() {
      let cardBack = await this.$game.hook(this, 'static', { file: '/images/cards/card_00.png' });
      let cardArray = await this.$game.hook(this, 'card2object', { cards: this.cards });
      var cards = [];
      if (this.ani) {
        for (var i = 0; i < cardArray.length; i++) {
          var card = cardArray[i];
          card.x = -this.cardWidth / 2;
          card.y = -200;
          card.z = 100 - i;
          card.transform = 'rotateY(180deg)';
          if (this.showCard) {
            card.pic = card.image;
          } else {
            card.pic = cardBack;
          }
          cards.push(card);
        }
        await this.$game.delay(0.3);
        this.myCards = cards;
        for (var i = 0; i < this.myCards.length; i++) {
          var card = this.myCards[i];
          this.moveCard(card, i);
          card.transform = 'rotateY(0deg)';
          await this.$game.delay(0.08);
          card.z = 0;
          await this.$game.delay(0.01);
          card.pic = card.image;
          this.$forceUpdate();
        }
        //整理牌
        await this.$game.delay(0.3);
        this.transform = 'rotate3d(0,1,0,90deg)';
        await this.$game.delay(0.1);
      }
      this.update();
      if (this.ani) {
        await this.$game.delay(0.1);
        this.transform = 'rotate3d(0,0,0,0deg)';
      }
    },
    sel(card, idx) {
      if (!this.select) {
        return;
      }
      card.selected = !card.selected;
      var cards = [];
      for (var i = 0; i < this.myCards.length; i++) {
        var card = this.myCards[i];
        if (card.selected) {
          cards.push(card.name);
        }
      }
	  // #ifdef VUE2
	  this.$emit('input', cards);
	  // #endif
	  // #ifdef VUE3
	  this.$emit("update:modelValue", cards)
	  // #endif
      console.log(idx, cards);
    }
  }
};
</script>
<style scoped>
.onez-cards {
  position: relative;
  transition: all 0.1s ease 0s;
  transform-origin: 50% 50%;
}

.onez-cards .onez-card {
  position: absolute;
  left: 0;
  top: 0;
}
.onez-card {
  position: relative;
  display: inline-block;
  width: 71px;
  height: 96px;
  background-size: auto 100%;
  background-position: 0 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.onez-cards .selected {
  top: -30px;
}
</style>
